<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add a credit</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" id="app-add">
    <img src="../static/img/logo.png" class="col-sm-6">
    <h1 class="modal-title text-center col-sm-6 media-middle" style="line-height: 156px;">{{title}}</h1>
    <form class="form-horizontal col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-2">
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="bank-name">Bank Name</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="bank-name" v-model="name">
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="credit">Credit</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon">¥</span>
                    <input type="text" class="form-control" id="credit" v-model="credit">
                </div>
                <span class="sr-only">(success)</span>
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="balance">Balance</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon">¥</span>
                    <input type="text" class="form-control" id="balance" v-bind:value="credit-debit"/>
                </div>
                <span class="sr-only">(success)</span>
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="debit">Debit</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon">¥</span>
                    <input type="text" class="form-control" id="debit" v-model="debit">
                </div>
                <span class="sr-only">(success)</span>
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="account-date">Account Date</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon">📅</span>
                    <input type="text" class="form-control" id="account-date" v-model="account_date">
                </div>
                <span class="sr-only">(success)</span>
            </div>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label col-sm-4" for="repayment-date">Repayment Date</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon">📅</span>
                    <input type="text" class="form-control" id="repayment-date" v-model="repayment_date">
                </div>
                <span class="sr-only">(success)</span>
            </div>
        </div>
        <button type="button" class="btn btn-primary  col-sm-offset-3" @click="addItem">Submit</button>
        <button type="button" class="btn btn-warning  col-sm-offset-3" @click="addItemCancel">Cancel</button>
    </form>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script src="../static/js/asset.js"></script>
</body>
</html>